<template>
  <div>
    <van-nav-bar title="影院列表" left-arrow @click-left="$router.push('/city')" @click-right="$router.push('/search')">
      <template #left>
        <span>城市</span>
        <van-icon name="arrow-down" />
      </template>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- 实现下载加载更多 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" loading-text="玩命加载中...">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getCinemaList">
        <van-cell v-for="item in cinemas" :key="item.cinemaId" :to="'/cinema/' + item.cinemaId">
          <template #title>
            <div class="name">
              <div>{{ item.name }}</div>
              <div>￥25起</div>
            </div>
            <div class="address">
              <div>{{ item.address | strsub(20) }}</div>
              <div>距离未知</div>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 影院列表数据
import { getCinemaListApi } from '@/api/cinemaApi'
export default {
  data() {
    return {
      cinemas: [],
      page: 1,
      loading: false,
      finished: false,
      refreshing: false,
    }
  },
  mounted() {
    this.loading = true
    this.getCinemaList()
  },
  methods: {
    goCinemaDetail(id = 1) {
      console.log(id)
    },
    // 下拉刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.getCinemaList(1)
    },
    async getCinemaList(pos = 0) {
      let page = this.page
      let ret = await getCinemaListApi(page)
      if (pos === 0) {
        this.cinemas = [...this.cinemas, ...ret.data.cinemas]
      } else {
        this.cinemas = [...ret.data.cinemas, ...this.cinemas]
      }
      this.page++
      this.loading = false
      this.refreshing = false
      if (ret.data.cinemas.length == 0) {
        this.$toast.fail('没有更多数据')
        this.finished = true
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.name {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  div:nth-of-type(1) {
    color: #191a1b;
    font-size: 15px;
  }
  div:nth-of-type(2) {
    color: #ff5f16;
    font-size: 15px;
  }
}
.address {
  display: flex;
  justify-content: space-between;
  div {
    color: #797d82;
    font-size: 12px;
  }
}
</style>